<template>
	<div class="x-unit" @click.self="closeMask" :style="{ height: `${deviceH}px` }">
		<div class="unit-ctx" :style="{ 'background-image': `url(${modelBg})` }">
			<div class="ctx-title">历史记录</div>
			<!-- 历史记录 -->
			<div v-show="historyshow">
				<ul class="tabbar">
					<li @click="changetabbar(0)" :class="{ active: tabbarIndex === 0 }">人脸门禁</li>
					<li @click="changetabbar(1)" :class="{ active: tabbarIndex === 1 }">人脸抓拍</li>
					<li @click="changetabbar(2)" :class="{ active: tabbarIndex === 2 }">车辆抓拍</li>
					<li @click="changetabbar(3)" :class="{ active: tabbarIndex === 3 }">自助采集</li>
					<li @click="changetabbar(4)" :class="{ active: tabbarIndex === 4 }">电子围栏</li>
					<li @click="changetabbar(5)" :class="{ active: tabbarIndex === 5 }">周界围栏</li>
					<li @click="changetabbar(6)" :class="{ active: tabbarIndex === 6 }">物联设备</li>
					<li @click="changetabbar(7)" :class="{ active: tabbarIndex === 7 }">预警事件</li>
				</ul>
				<div class="ctx-info" v-if="tabbarIndex === 0">
					<div class="info-table">
						<div class="table-rs">
							<div style="width: 100%;" class="table-header">
								<el-date-picker v-model="timeC.time" type="datetimerange" class="dateselect" value-format="yyyy-MM-dd HH:mm:ss" style="float: left;background: #06121d !important;"></el-date-picker>
								<div class="header-item">
									<input v-model="timeC.name" class="input" placeholder="姓名查询" />
								</div>
                <!-- <div class="header-item">
                  <x-select @selectItem="selectItem" :name="unitTypeName || '所有位置'" :listItem="selectList" />
								</div> -->
								<div class="header-item" style="width:250px;">
									<input v-model="timeC.idNum" class="input" placeholder="身份证查询" />
								</div>
								<!-- <div class="header-kong"></div> -->
								<div @click="btnsearch('menjin')" class="btnsearch">搜索</div>
							</div>
							<ul class="table-list">
								<li class="list-item">
									<div class="item-no">序号</div>
									<div class="item-pic">图片</div>
									<div class="item-type">姓名</div>
									<div class="item-name" style="width:200px">证件号</div>
									<div class="item-time">时间</div>
									<div class="item-people">位置</div>
									<div class="item-people">类型</div>
								</li>
								<li v-for="(item, i) in UnitPageEchartsData" :key="item.id" class="list-item1">
									<!-- <div class="item-pic"></div> -->
									<div class="item-no">{{ i + 1 + pageSize * (pageNum - 1) }}</div>
									<div class="item-pic" style="height: 100px;display:flex;align-items: center;justify-content: center;cursor: pointer;" @click="picshow(item.pic)">
										<img class="pic" :src="item.pic |filterimgsrc" style="height: 80%;" />
									</div>
									<div class="item-type">{{ new String().hideName(item.name) }}</div>
									<div class="item-name" @click="changedangan(item.idNum)" style="cursor:pointer;width:200px">{{ new String().hideidCard(item.idNum) }}</div>
									<div class="item-time">{{ new Date().dateFtt(item.eventTime) }}</div>
									<div class="item-people">{{ item.gateName!=null?item.gateName.substring(0, 5):"" }}</div>
									<div class="item-people">{{ item.type === 1 ? "出" : "入" }}</div>
								</li>
							</ul>
						</div>
						<div v-if="allpage > 0" class="table-footer">
							<x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
						</div>
					</div>
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 1">
					<div class="info-table">
						<div class="table-rs">
							<div style="width: 100%;" class="table-header">
								<el-date-picker v-model="timeD.time" type="datetimerange" class="dateselect" value-format="yyyy-MM-dd HH:mm:ss" style="float: left;background: #06121d !important;"></el-date-picker>
								<div class="header-item">
									<input v-model="timeD.name" class="input" placeholder="姓名查询" />
								</div>

								<div class="header-item" style="width:250px;">
									<input v-model="timeD.idNum" class="input" placeholder="身份证查询" />
								</div>
								<div @click="btnsearch('renlian')" class="btnsearch">搜索</div>
							</div>
							<ul class="table-list">
								<li class="list-item">
									<!-- <div class="item-pic">单位类型</div> -->
									<div class="item-no">序号</div>
									<div class="item-pic">图片</div>
									<div class="item-type">姓名</div>
									<div class="item-name">证件号</div>
									<div class="item-time">时间</div>
								</li>
								<li v-for="(item, i) in UnitPageEchartsDataA" :key="item.id" class="list-item1">
									<div class="item-no">{{ i + 1 + pageSizeA * (pageNumA - 1) }}</div>
									<!-- <div class="item-pic"></div> -->
									<div class="item-pic" style="height: 100px;display:flex;align-items: center;cursor: pointer;" @click="picshow(item.pic1)">
										<img class="pic" :src="item.pic1 |filterimgsrc" style="width: 100%;" />
									</div>
									<div class="item-type">{{ item.name }}</div>
									<div class="item-name" style="cursor:pointer;" @click="changedangan(item.idNum)">{{ new String().hideidCard(item.idNum) }}</div>
									<div class="item-time">{{ new Date().dateFtt(item.startTime) }}</div>
								</li>
							</ul>
						</div>
						<div v-if="allpageA > 0" class="table-footer">
							<x-page @currentChange="currentChangeA" :currentPage="pageNumA" :page-size="5" :allpage="allpageA" :total-num="false" />
						</div>
					</div>
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 2">
					<div class="info-table">
						<div class="table-rs">
							<div style="width: 100%;" class="table-header">
								<el-date-picker v-model="timeE.time" type="datetimerange" class="dateselect" value-format="yyyy-MM-dd HH:mm:ss" style="float: left;background: #06121d !important;"></el-date-picker>
								<div class="header-item" style="width:200px;">
									<input v-model="timeE.license" class="input" placeholder="车牌查询" />
								</div>
								  <div class="header-item" style="width:220px;text-align:left;padding:0;">
                  <div class="header-select" >
                    <x-select @selectItem="selectItemCar" :name="unitCarName || '监控位置'" :listItem="selectCarList" />
                  </div>
                </div>
								<div @click="btnsearch('car')" class="btnsearch">搜索</div>
							</div>
							<ul class="table-list">
								<li class="list-item">
									<div class="item-no">序号</div>
									<!-- <div class="item-pic">单位类型</div> -->
									<div class="item-people">图片</div>
									<div class="item-type">车牌号</div>
									<div class="item-type">摄像头号</div>
									<div class="item-type">车主</div>
									<div class="item-name">证件号</div>
									<div class="item-time" style="width:200px;">时间</div>
								</li>
								<li v-for="(item, i) in UnitPageEchartsDataB" :key="item.id" class="list-item1">
									<div class="item-no">{{ i + 1 + pageSizeB * (pageNumB - 1) }}</div>
									<div class="item-pic" style="height: 100px;display:flex;align-items: center;cursor:pointer;" @click="picshow(item.pic)">
										<img class="pic" :src="item.pic |filterimgsrc" style="width: 100%;" />
									</div>
									<div class="item-type">{{ item.license }}</div>
									<div class="item-type">{{ item.camerid }}</div>
									<div class="item-type">{{ item.name }}</div>
									<div class="item-name" @click="changedangan(item.idNum)" style="cursor:pointer;">{{ new String().hideidCard(item.idNum) }}</div>
									<div class="item-time" style="width:200px;">{{ new Date().dateFtt(item.startTime) }}</div>
								</li>
							</ul>
						</div>
						<div v-if="allpageB > 0" class="table-footer">
							<x-page @currentChange="currentChangeB" :currentPage="pageNumB" :page-size="5" :allpage="allpageB" :total-num="false" />
						</div>
					</div>
				</div>
				<!-- 自助采集 -->
				<div class="ctx-info" v-if="tabbarIndex === 3">
					<div class="info-table">
						<div class="table-rs">
              <div style="width: 100%;" class="table-header">
                <el-date-picker v-model="timeCollect.time" type="datetimerange" class="dateselect" value-format="yyyy-MM-dd HH:mm:ss" style="float: left;background: #06121d !important;width:280px;"></el-date-picker>
                <div class="header-item" style="width:130px;">
                  <input v-model="timeCollect.name" class="input" placeholder="姓名查询" />
                </div>
                <div class="header-item" style="width:200px;">
                  <input v-model="timeCollect.idNum" class="input" placeholder="身份证查询" />
                </div>
                <div class="header-item" style="width:150px;text-align:left;padding:0;">
                  <div class="header-select" style="margin-right:20px;margin-left:0;">
                    <x-select @selectItem="selectItem1" :name="unitTypeName1 || '全部'" :listItem="selectList1" />
                  </div>
                </div>
                <div class="header-item" style="width:170px;text-align:left;padding:0;">
                  <div class="header-select" style="margin-right:20px;margin-left:0;">
                    <x-select @selectItem="selectItem2" :name="unitTypeName2 || '全部'" :listItem="selectList2" />
                  </div>
                </div>
                <div @click="btnsearch('collect')" class="btnsearch">搜索</div>
              </div>
							<ul class="table-list">
                <li class="list-item">
                  <div class="item-no">序号</div>
                  <div class="item-pic">图片</div>
                  <div class="item-type" style="width:90px;text-align:center;">姓名</div>
                  <div class="item-type" style="width:130px;text-align:center;">手机</div>
                  <div class="item-type" style="width:100px;text-align:center;">房间</div>
                  <div class="item-name" style="width:200px;text-align:center;">证件号</div>
                  <div class="item-time" style="width:200px;text-align:center;">时间</div>
                  <div class="item-people" style="width:100px;text-align:center;">状态</div>
                </li>
                <li v-for="(item, i) in UnitPageEchartsDataCollect" :key="item.id" class="list-item1">
                  <div class="item-no">{{ i + 1 + pageSize * (pageNum - 1) }}</div>
                  <div class="item-pic" style="height: 100px;display:flex;align-items: center;justify-content: center;cursor: pointer;" @click="picshow(item.pic)">
                    <img class="pic" :src="item.pic |filterimgsrc" style="height: 80%;" :onerror="defaultImg"/>
                  </div>
                  <div class="item-type" style="width:90px;text-align:center;">{{ item.truename }}</div>
                  <div class="item-type" style="width:130px;text-align:center;">{{ item.mobile }}</div>
                  <div v-if="item.roomno == null" class="item-type" style="width:100px;text-align:center;">{{ item.unitno }}-{{ item.houseno }}</div>
                  <div v-if="item.roomno != null" class="item-type" style="width:100px;text-align:center;">{{ item.unitno }}-{{ item.houseno }}-{{ item.roomno }}</div>
                  <div class="item-name" @click="changedangan(item.cardid)" style="cursor:pointer;width:200px;text-align:center;">{{ new String().hideidCard(item.cardid) }}</div>
                  <div class="item-time" style="width:200px;text-align:center;">{{ new Date().dateFtt(item.lastmodifieddate) }}</div>
                  <div class="item-people" style="width:100px;text-align:center;">{{ item.status }}</div>
                </li>
							</ul>
						</div>
						<div v-if="allpageCollect > 0" class="table-footer">
							<x-page @currentChange="currentChangeCollect" :currentPage="pageNumCollect" :page-size="5" :allpage="allpageCollect" :total-num="false" />
						</div>
					</div>
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 4">
					<div class="info-table">
            <div class="table-rs">
              <ul class="table-list">
                <li class="list-item">
                  <div class="item-no">序号</div>
                  <div class="item-type">采集时间</div>
                  <div class="item-name">IMSI</div>
                  <div class="item-phone">归属地</div>
                </li>
                <li v-for="(item,i) in ImsiInfoList" :key="item.id" class="list-item">
                   <div class="item-no">{{ i + 1 + 10 * (pageNumImsi - 1) }}</div>
                  <div class="item-type"> {{item.collectTime
                                      .replace("T", " ")
                                      .replace("Z", " ")
                                      .substr(5, 14)
                                      }}</div>
                  <div class="item-name">{{ item.imsi }}</div>
                  <div class="item-phone">{{item.ownerShip}}</div>
                </li>
              </ul>
            </div>
            <div v-if="allpage>0" class="table-footer">
              <x-page
                @currentChange="currentChangeF"
                :currentPage="pageNumImsi"
                :page-size="5"
                :allpage="allpageImsi"
                :total-num="false"
              />
            </div>
          </div>
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 5">
					<!-- <div class="info-table">
            <div class="table-rs">
              <ul class="table-list">
                <li class="list-item">
                  <div class="item-type">姓名</div>
                  <div class="item-name">证件号</div>
                  <div class="item-phone">时间</div>
                  <div class="item-people">房号</div>
                  <div class="item-cardid">类型</div>
                </li>
                <li v-for="item in UnitPageEchartsData" :key="item.id" class="list-item">
                  <div class="item-type">{{item.name}}</div>
                  <div class="item-name">{{item.idNum}}</div>
                  <div class="item-phone">{{new Date().dateFtt(item.addTime)}}</div>
                  <div class="item-people">{{item.roomNum}}</div>
                  <div class="item-cardid">{{item.address}}</div>
                </li>
              </ul>
            </div>
            <div v-if="allpage>0" class="table-footer">
              <x-page
                @currentChange="currentChange"
                :page-size="5"
                :allpage="allpage"
                :total-num="false"
              />
            </div>
          </div>-->
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 6">
					<div class="info-table">
						<div class="table-rs">
							<div style="width: 100%;">
								<el-date-picker v-model="timeA" type="date" el-icon-date="el-icon-date" class="dateselect1"  id="dateselect1" value-format="yyyy-MM-dd" @change="timeChange()"
								 style="float: left;"></el-date-picker>
							</div>
							<ul class="table-list">
								<li class="list-item">
									<div class="item-no">序号</div>
									<div class="item-time">时间</div>
									<div class="item-name" style="width: 500px;">类型</div>
								</li>
								<li v-for="(item, i) in UnitPageEchartsDataC" :key="item.id" class="list-item">
									<div class="item-no">{{ i + 1 + pageSizeC * (pageNumC - 1) }}</div>
									<div class="item-time">{{ new Date().dateFtt(item.reportTime) }}</div>
									<div class="item-name" style="width: 500px;">{{ item.data1 }}</div>
								</li>
							</ul>
						</div>
						<div v-if="allpageC > 0" class="table-footer">
							<x-page @currentChange="currentChangeC" :page-size="5" :allpage="allpageC" :total-num="false" />
						</div>
					</div>
				</div>
				<div class="ctx-info" v-if="tabbarIndex === 7">
					<div class="info-table">
						<div class="table-rs">
							<div style="width: 100%;">
								<el-date-picker v-model="timeB.time" type="datetimerange" class="dateselect" value-format="yyyy-MM-dd HH:mm:ss" style="float: left;background: #06121d !important;"></el-date-picker>
								<div @click="btnsearch('yujing')" class="btnsearch">搜索</div>
							</div>
							<ul class="table-list">
								<li class="list-item">
									<div class="item-no">序号</div>
									<div class="item-type">报警地点</div>
									<div class="item-name">报警类型</div>
									<div class="item-time">时间</div>
								</li>
								<li v-for="(item, i) in UnitPageEchartsDataD"  class="list-item" @click="showVideo(item)" style="cursor: pointer;">
									<!-- <div class="item-pic"></div> -->
									<div class="item-no">{{ i + 1 + pageSizeD * (pageNumD - 1) }}</div>
									<div class="item-type">{{ item.address }}</div>
									<div class="item-name">{{ item.alarmType }}</div>
									<div class="item-time">{{ new Date().dateFtt(item.alarmTime) }}</div>
								</li>
							</ul>
						</div>
						<div v-if="allpageD > 0" class="table-footer">
							<x-page @currentChange="currentChangeD" :currentPage="pageNumD"  :page-size="5" :allpage="allpageD" :total-num="false" />
						</div>
					</div>
				</div>
			</div>
			<div v-if="!historyshow">
				<x-dangan :id="danganid" v-if="dangan" @changedangan="changedangan(null,'out')"></x-dangan>
			</div>
		</div>
		<!-- <el-dialog :visible.sync="dangan" class="jk-dialog">

    </el-dialog>-->

		<!-- dialog -->
		<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="50%">
			<div style="width:786px;height:432px;margin:auto">
				<img :src="picurl |filterimgsrc" alt style="height:100%" />
			</div>
		</el-dialog>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible1"
       v-if="dialogVisible1" v-dialogDrag
      class="jk-dialog "
      style="z-index:10000;"
    >
    	<div style="width:786px;height:432px;margin:auto">
				<img :src="picurl1 |filterimgsrc" alt style="height:100%" />
			</div>
    </el-dialog>
	</div>
</template>
<script>
import jkData from "../xmonitor/data.json";
import {
  getAlarmInfoForPage,
  dataAnalysisList,
  districtCarInfoPageList,
  districtPersonInfoPageList,
  districtGatedPersoninfoPageList,
  GetDictDataEnum,
  getPhotouUrl
} from '@/api/peopleApi'

import {
  DevicesTypes
} from '@/api/device'
import {
    getDoorAccessInfoForPage,
    GetImsiInfoForPage
} from '@/api/portalApi'
import XPie from '@/components/xunitpie'
import XPage from '@/components/xpage'
import XSelect from '@/components/xselect'
import XDangan from '@/components/xdanganmodel'

export default {
  name: 'xunitmodel',
  props: {
    id: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    }
  },
  computed: {},
  data () {
    return {
      timeA: '',
      timeB: {
        time: ''
      },
      timeC: {
        time: '',
        idNum: '',
        name: '',
        unitType:'',
        unitTypeName:''
      },
      timeD: {
        time: '',
        idNum: '',
        name: ''
      },
      timeE: {
        time: '',
        license: ''
      },
      timeCollect: {
        time: '',
        idNum: '',
        name: '',
        statusType: '',
        typeId: '',
      },
      historyshow: true,
      dialogVisible: false,
      dangan: false,
      danganid: '',
      picurl: '',
      alarmcodeJson: DevicesTypes(),
      tabbarIndex: 0,
      modelBg: require('@/assets/images/modelBg.png'),
      deviceH: 0,
      lengalperson: '', //法人
      lpTelePhone: '', //法人电话
      lpidCard: '', //法人身份证号
      unitName: '', //单位名称,
      unitTelePhone: '', //单位电话
      unitType1: '', //单位类型
      unitTypeName1: '', //
      unitType2: '', //单位类型
      unitTypeName2: '', //
      unitCar:'',
      unitCarName:'',
      pageSize: 10,
      pageNum: 1,
      pageSizeA: 10,
      pageNumA: 1,
      pageSizeB: 10,
      pageNumB: 1,
      pageSizeC: 10,
      pageNumC: 1,
      pageSizeD: 10,
      pageNumD: 1,
      pageSizeCollect: 10,
      pageNumCollect: 1,
      total: 0,
      allpage: 0,
      totalA: 0,
      allpageA: 0,
      totalB: 0,
      allpageB: 0,
      totalC: 0,
      allpageC: 0,
      totalD: 0,
      allpageD: 0,
      totalCollect: 0,
      allpageCollect: 0,
      pageNumImsi:1,
      totalImsi: 0,
      allpageImsi: 0,
      ImsiInfoList:[],
      UnitTypeEchartsData: [],
      UnitPageEchartsData: [],
      UnitPageEchartsDataA: [],
      UnitPageEchartsDataB: [],
      UnitPageEchartsDataC: [],
      UnitPageEchartsDataD: [],
      UnitPageEchartsDataCollect: [],
      UnitTypeEchartsData1: null,
      UnitTypeEchartsData2: [],
      unitTypeList: [],
      camerquery: {},

      defaultImg:'this.src="'+require('@/assets/images/touxiangicon.png')+'"',
      selectList1: [
        {
          'enumName': '全部',
          'id': 10
        },
        {
          'enumName': '审核中',
          'id': 3
        },
        {
          'enumName': '审核通过',
          'id': 1
        },
        {
          'enumName': '不通过',
          'id': 2
        },
      ],
      selectCarList:[
        {
         'enumName': '监控位置',
          'id': ''
      },
        {
         'enumName': '北门车牌进监控',
          'id': '1000017'
      },{
         'enumName': '南门车牌进监控',
          'id': '1000032'
      },{
         'enumName': '南门车牌出监控',
          'id': '1000031'
      }],
      selectList2: [
        {
          'enumName': '全部',
          'id': 10
        },
        {
          'enumName': '人员登记列表',
          'id': 1
        },
        {
          'enumName': '当天登记列表',
          'id': 2
        },
        {
          'enumName': '核实下发列表',
          'id': 3
        },
      ],
      dialogVisible1: false,
      dialogTitle: "",
      token: "",
      v1: null,
      ifstart: false,
      picurl1:""
    }
  },
  components: {
    XPie,
    XPage,
    XSelect,
    XDangan
  },
  beforeMount () {
    let h = document.documentElement.clientHeight || document.body.clientHeight
    this.deviceH = h
  },
  mounted () {
    this.GetUnitData()
  },

  methods: {
    changedangan (id,type) {
      if(id){
        this.dangan = !this.dangan
        this.danganid = id
        this.historyshow = !this.historyshow
      }
      if(type=='out'){
        this.dangan = !this.dangan
        this.danganid = ''
        this.historyshow = !this.historyshow
      }
    },
    picshow (url) {
      this.dialogVisible = !this.dialogVisible
      this.picurl = url
    },
    btnsearch (name) {




    // this.currentChangeC (1)


      if (name == 'yujing') {
        this.pageNumD=1
        this.currentChangeD (1)
        this.timeChangeB()
      }
      if (name == 'menjin') {
        console.log('menjin')
        this.pageNum=1
        this.currentChange (1)
        this.timeChangeC()
      }
      if (name == 'renlian') {
        this.pageNumA=1
        this.currentChangeA (1)
        this.timeChangeD()
      }
      if (name == 'car') {
        this.pageNumB=1
        this.currentChangeB (1)
        this.timeChangeE()
      }
      if (name == 'collect') {
        this.pageNumCollect=1
        this.timeChangeCollect()
        this.currentChangeCollect(1)
      }
      // console.log(this.timeB);
    },
    async timeChange () {
      let date = new Date()
      let y = date.getFullYear()
      let m = ('0' + (date.getMonth() + 1)).slice(-2)
      let d = date.getDate()
      let pagequery = {
        date: this.timeA,
        code: this.code,
        pageNum: this.pageNumC,
        pageSize: this.pageSizeC
      }
      console.log(222, this.timeA)
      const res = await dataAnalysisList(pagequery)
      this.totalC = res.total
      this.allpageC = Math.ceil(this.totalC / this.pageSizeC)
      setTimeout(
        res.rows.forEach(item => {
          let ttt = JSON.parse(item.data)
          for (let i = 0; i < this.alarmcodeJson.length; i++) {
            if (
              this.alarmcodeJson[i].devtype == item.deviceType
            ) {
              item.data1 =
									this.alarmcodeJson[i].devname +
									'：' +
									this.alarmcodeJson[i].alarmcodename
            }
          }
        }),
        2000
      )
      console.log(this.UnitPageEchartsDataC)
      this.UnitPageEchartsDataC = res.rows
    },
    //预警
    async timeChangeB () {
      let date = new Date()
      let y = date.getFullYear()
      let m = ('0' + (date.getMonth() + 1)).slice(-2)
      let d = date.getDate()
      let pagequery = {
        startTime: Array.isArray(this.timeB.time) ? this.timeB.time[0] : '',
        endTime: Array.isArray(this.timeB.time) ? this.timeB.time[1] : '',
        placeId: this.code,
        pageNum: this.pageNumD,
        pageSize: this.pageSizeD
      }

      const res = await getAlarmInfoForPage(pagequery)
      this.totalD = res.total
      this.allpageD = Math.ceil(this.totalD / this.pageSizeD)
      this.UnitPageEchartsDataD = res.list
    },
    //门🈲
    async timeChangeC () {
      console.log(222)
      console.log(this.timeC)
      //Array.isArray判断筛选
      let pagequery = {
        startTime: Array.isArray(this.timeC.time) ? this.timeC.time[0] : '',
        endTime: Array.isArray(this.timeC.time) ? this.timeC.time[1] : '',
        placeId: this.code,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.timeC.name,
        idNum: this.timeC.idNum
      }
      console.log(pagequery)
      const res = await districtGatedPersoninfoPageList(pagequery)
      this.total = res.total
      this.allpage = Math.ceil(this.total / this.pageSize)
      this.UnitPageEchartsData = res.list
    },
    //人脸
    async timeChangeD () {
      try {
        let pagequery = {
          beginTime: Array.isArray(this.timeD.time) ? this.timeD.time[0] : '',
          endTime: Array.isArray(this.timeD.time) ? this.timeD.time[1] : '',
          code: this.code,
          index: this.pageNumA,
          size: this.pageSizeA,
          name: this.timeD.name,
          idNum: this.timeD.idNum
        }
        const res = await districtPersonInfoPageList(pagequery)
        this.totalA = res.total
        this.allpageA = Math.ceil(this.totalA / this.pageSizeA)
        this.UnitPageEchartsDataA = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    //车辆
    async timeChangeE () {
      try {
        let pagequery = {
          beginTime: Array.isArray(this.timeE.time) ? this.timeE.time[0] : '',
          endTime: Array.isArray(this.timeE.time) ? this.timeE.time[1] : '',
          code: this.code,
          index: this.pageNumB,
          size: this.pageSizeB,
          license: this.timeE.license,
          camerid:this.unitCar
        }
        const res = await districtCarInfoPageList(pagequery)
        this.totalB = res.total
        this.allpageB = Math.ceil(this.totalB / this.pageSizeB)
        this.UnitPageEchartsDataB = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    //自助采集搜索
    async timeChangeCollect() {
      console.log(this.unitType1 + "==" + this.unitType2)
      if (this.unitType1 == '' || this.unitType1 == null || this.unitType1 == 10) {
        this.timeCollect.statusType = ''
      } else if (this.unitType1 == 3) {
        this.timeCollect.statusType = 0
      } else {
        this.timeCollect.statusType = this.unitType1
      }
      if (this.unitType2 == '' || this.unitType2 == null || this.unitType2 == 10) {
        this.timeCollect.typeId = 1
      } else {
        this.timeCollect.typeId = this.unitType2
      }

      try {
        let pagequery = {
          placeId: this.code,
          pageNum: this.pageNumCollect,
          pageSize: this.pageSizeCollect,
          idNum: (this.timeCollect.idNum == '' || this.timeCollect.idNum == null) ? '' : this.timeCollect.idNum,
          name: (this.timeCollect.name == '' || this.timeCollect.name == null) ? '' : this.timeCollect.name,
          startTime: (this.timeCollect.time == '' || this.timeCollect.time == null) ? '' : this.timeCollect.time[0],
          endTime: (this.timeCollect.time == '' || this.timeCollect.time == null) ? '' : this.timeCollect.time[1],
          statusType: this.timeCollect.statusType,
          typeId: this.timeCollect.typeId,
        }
        console.log("=-=" + JSON.stringify(pagequery))
        const res = await getDoorAccessInfoForPage(pagequery)
        console.log("_+" + JSON.stringify(res))
        this.totalCollect = res.data.total
        this.allpageCollect = Math.ceil(this.totalCollect / this.pageSizeCollect)
        res.data.list.map(item=>{
          item.pic=getPhotouUrl()+item.cardid
        })
        // 获取图片
					// for(let i=0;i<res.data.list.length;i++){
					// 	let picUrl = await request.get("/zhsq/front/anon/getFile.json?path=face&fileName="+ res.data.list[i].cardid +".jpg");
					// 	console.log("从这里获取图片" + picUrl.pic)
					// 	res.data.list[i].pic = picUrl.pic
					// }
        this.UnitPageEchartsDataCollect = res.data.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    async getdoordata () {
      try {
        let pagequery = {
          placeId: this.code,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        const res = await districtGatedPersoninfoPageList(pagequery)
        console.log("++==" + JSON.stringify(res))
        this.total = res.total
        this.allpage = Math.ceil(this.total / this.pageSize)
        this.UnitPageEchartsData = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    async getfacedata () {
      console.log(this.pageSizeA)
      try {
        let pagequery = {
          code: this.code,
          index: this.pageNumA,
          size: this.pageSizeA
        }
        const res = await districtPersonInfoPageList(pagequery)
        this.totalA = res.total
        this.allpageA = Math.ceil(this.totalA / this.pageSizeA)
        this.UnitPageEchartsDataA = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    async getcardata () {
      try {
        let pagequery = {
          code: this.code,
          index: this.pageNumB,
          size: this.pageSizeB
        }
        const res = await districtCarInfoPageList(pagequery)
        this.totalB = res.total
        this.allpageB = Math.ceil(this.totalB / this.pageSizeB)
        this.UnitPageEchartsDataB = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    //电子围栏
    async getImsiInfoForPage(){
      try {
        let pagequery = {
          placeId : this.code,
          pageNum: this.pageNumImsi,
          pageSize: 10,
        }
        const res = await GetImsiInfoForPage(pagequery)
        console.log("_+" + JSON.stringify(res))
        this.totalImsi = res.data.total
        this.allpageImsi = Math.ceil(this.totalImsi / 10)

        this.ImsiInfoList = res.data.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    //自助采集
    async getDoorAccessInfoForPage() {
      this.pageNumCollect = 1;
      this.timeCollect.idNum = '';
      this.timeCollect.name = '';
      this.timeCollect.time = '';
      this.timeCollect.statusType = '';
      this.timeCollect.typeId = '';
      this.unitTypeName1 = '';
      this.unitTypeName2 = '';
      this.unitType1 = '';
      this.unitType2 = '';

      try {
        let pagequery = {
          placeId : this.code,
          pageNum: this.pageNumCollect,
          pageSize: this.pageSizeCollect,
          typeId: 1,
        }
        const res = await getDoorAccessInfoForPage(pagequery)
        console.log("_+" + JSON.stringify(res))
        this.totalCollect = res.data.total
        this.allpageCollect = Math.ceil(this.totalCollect / this.pageSizeCollect)
         res.data.list.map(item=>{
          item.pic=getPhotouUrl()+item.cardid
        })
        this.UnitPageEchartsDataCollect = res.data.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    async getwuliandata () {
      try {
        let date = new Date()
        let y = date.getFullYear()
        let m = ('0' + (date.getMonth() + 1)).slice(-2)
        let d = date.getDate()
        let pagequery = {
          date: y + '-' + m + '-' + d,
          code: this.code,
          pageNum: this.pageNumC,
          pageSize: this.pageSizeC
        }
        const res = await dataAnalysisList(pagequery)
        this.totalC = res.total
        this.allpageC = Math.ceil(this.totalC / this.pageSizeC)
        res.rows.forEach(item => {
          let ttt = JSON.parse(item.data)
          for (let i = 0; i < this.alarmcodeJson.length; i++) {
            if (this.alarmcodeJson[i].devtype == item.deviceType) {
              item.data1 =
									this.alarmcodeJson[i].devname +
									'：' +
									this.alarmcodeJson[i].alarmcodename
            }
          }
        })
        this.UnitPageEchartsDataC = res.rows
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    async getjinggaodata () {
      try {
        let pagequery = {
          placeId: this.code,
          pageNum: this.pageNumD,
          pageSize: this.pageSizeD
        }
        const res = await getAlarmInfoForPage(pagequery)
        this.totalD = res.total
        this.allpageD = Math.ceil(this.totalD / this.pageSizeD)
        this.UnitPageEchartsDataD = res.list
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    getnull () {
      this.totalC = 0
      this.UnitPageEchartsDataC = []
      this.totalD = 0
      this.UnitPageEchartsDataD = []
      this.totalE = 0
      this.UnitPageEchartsDataE = []
    },
    GetUnitData () {
      switch (this.tabbarIndex) {
        case 0:
          this.getdoordata()
          break
        case 1:
          this.getfacedata()
          break
        case 2:
          this.getcardata()
          break
        case 3:
          this.getDoorAccessInfoForPage()
          break
        case 4:
          this.getImsiInfoForPage()
          break;
        case 6:
          this.getwuliandata()
          break
        case 7:
          this.getjinggaodata()
          break
        default:
          this.getnull()
          break
      }
    },
    //获取类型
    async GetDictDataEnumList () {
      try {
        const res = await GetDictDataEnum('company_type')
        res.unshift({
          enumName: '全部',
          id: ''
        })
        this.unitTypeList = res
      } catch (error) {
        this.$message({
          type: 'error',
          message: error
        })
      }
    },
    closeMask () {
      this.$emit('closeMask')
    },
    //分页
    currentChange (n) {
      console.log('分页')
      this.pageNum = n
      this.timeChangeC()
    },
    currentChangeA (n) {
      console.log('分页')
      this.pageNumA = n
      this.timeChangeD()
    },
    currentChangeB (n) {
      console.log('分页')
      this.pageNumB = n
      this.timeChangeE()
    },
    currentChangeC (n) {
      console.log('分页')
      this.pageNumC = n
      this.timeChange()
    },
    currentChangeD (n) {
      console.log('分页')
      this.pageNumD = n
      this.timeChangeB()
    },
      currentChangeF(n){
        this.pageNumImsi = n
        this.getImsiInfoForPage()
    },
    currentChangeCollect(n) {
      console.log('分页')
      this.pageNumCollect = n
      this.timeChangeCollect()
    },
    //搜索
    searchEvent () {
      this.btnsearch()
    },
    //选择下拉框
    selectItem1 (name, id) {
      this.unitTypeName1 = name
      this.unitType1 = id
    },
    selectItem2(name, id) {
      this.unitTypeName2 = name
      this.unitType2 = id
    },
    selectItemCar(name,id){
      this.unitCarName = name
      this.unitCar = id
    },
    changetabbar (index) {
      this.tabbarIndex = index
      // this.pageNum=1
      this.GetUnitData()
    },
    showVideo(item){
      console.log(item)
      this.dialogVisible1 = true;

      this.picurl1=item.alarmPic

      // var that=this
      // var obj
      // jkData.map(item=>{
      //   var o = JSON.parse(JSON.stringify(item));
      //   if(o[4]==id){
      //     obj=o
      //   }
      // })
      // console.log(obj)
      //  that.dialogVisible1 = true;

      //       that.dialogTitle = obj[1];
      //       var conf1 = {
      //         videoid: "h5sVideo1",
      //         protocol: "http:", //http: or https:
      //         host: "192.168.15.232:5080", //localhost:8080
      //         rootpath: "/", // '/' or window.location.pathname
      //         token: "token" + obj[4],
      //         hlsver: "v1", //v1 is for ts, v2 is for fmp4
      //         session: "c1782caf-b670-42d8-ba90-2244d0b0ee83" //session got from login
      //       };
      //       console.log("*********");

      //       that.$nextTick(() => {
      //         var v1;
      //         if (that.token == "") {
      //           //init
      //           that.token = obj[4];
      //           that.v1 = H5sPlayerCreate(conf1);
      //           that.v1.connect();
      //         }
      //         //切换摄像头
      //         let p = new Promise((res, rej) => {
      //           console.log('切换摄像头')
      //           if (that.token != obj[4]) {
      //             if (that.v1 != null) {
      //               that.v1.disconnect();
      //               that.v1 = null;
      //               document.getElementById("h5sVideo1").remove();
      //               document.getElementById("h5videobox").innerHTML =
      //                 '<video style="height:600px" class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline ></video>';
      //               res();
      //             }
      //           }
      //         });
      //         p.then(res => {
      //           that.v1 = H5sPlayerCreate(conf1);
      //           that.v1.connect();
      //         });
      //       });


    }
  }
}
</script>

<style lang="less" scoped>
	.x-unit {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 999;

		.item-pie {
			width: 100%;
			height: 400px;
			margin-top: 10px;
			padding: 5px 0px;
			box-sizing: border-box;

			.pie-canvas {
				width: 100%;
				height: 100%;
			}
		}

		.unit-ctx {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1177px;
			height: 800px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 10px 30px;
			box-sizing: border-box;

			.ctx-title {
				width: 100%;
				padding-top: 10px;
				box-sizing: border-box;
				font-family: PingFangSC-Medium;
				font-size: 24px;
				color: #e9e9e9;
				letter-spacing: 4.8px;
				text-align: center;
				box-sizing: border-box;
			}

			.tabbar {
				display: flex;

				&>li {
					cursor: pointer;
					margin-right: 5px;
					display: inline-block;
					padding: 5px;
					border-radius: 4px;
					background: #0f0f2b;
					font-size: 16px;
					color: #fff;
				}
			}

			.tabbar .active {
				background: #3f8aff;
				color: #fff;
			}

			.ctx-info {
				width: 100%;

				height: 748px;
				padding-top: 20px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;

				.info-type {
					flex: 1;

					.type-title {
						width: 100%;
						font-family: PingFangSC-Medium;
						font-size: 18px;
						color: #69d3da;
						letter-spacing: 0;
						text-align: left;
						line-height: 36px;
					}

					.type-list {
						width: 100%;
						padding: 0;
						margin-top: 26px;
						list-style: none;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						box-sizing: border-box;

						.type-list-rs {
							width: 100%;
							list-style: none;
							margin-bottom: 20px;

							.rs-name {
								width: 100%;
								display: flex;
								justify-content: space-around;
								align-items: center;
								font-family: PingFangSC-Regular;
								font-size: 12px;
								color: #e5e5e5;
								margin-bottom: 5px;

								.name {
									flex: 1;
									text-align: left;
								}

								.number {
									flex: 1;
									text-align: right;
								}
							}

							.rs-process {
								width: 100%;
								height: 6px;
								border-radius: 4px;
								background: #333333;

								.process {
									transition: width 0.3s ease-in-out;
									height: 100%;
									border-radius: 4px;
									background-image: linear-gradient(270deg,
										#68e0cf 0%,
										#209cff 100%);
								}
							}
						}
					}
				}

				.info-table {
					flex: 3;
					height: 659px;
					padding-left: 40px;
					box-sizing: border-box;

					.table-rs {
						width: 100%;
						height: 562px;
						overflow-y: auto;

						.table-header {
							width: 100%;
							height: 40px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.header-kong {
								width: 186px;
								height: 100%;
								border: none;
								outline: none;
								// background: #06121d;
								border: 1px solid rgba(62, 178, 215, 0);
								border-radius: 4px;
								font-size: 14px;
								color: #fff;
								padding: 0 14px;
								box-sizing: border-box;
							}

							.header-item {
								width: 186px;
								height: 100%;
								border: none;
								outline: none;
								background: #06121d;
								border: 1px solid rgba(62, 178, 215, 0);
								border-radius: 4px;
								font-size: 14px;
								color: #fff;
								padding: 0 14px;
								box-sizing: border-box;

								.input {
									font-size: 14px;
									color: #fff;
									width: 100%;
									height: 100%;
									border: none;
									outline: none;
									background: transparent;
								}
							}

							.header-select {
								width: 100%;
								margin-left: 20px;
								height: 100%;
							}

							.header-more {
								width: 56px;
								margin-left: 20px;
								font-family: PingFangSC-Regular;
								font-size: 14px;
								color: #72edf5;
								line-height: 28px;
								text-decoration: underline;
							}

							.header-btn {
								width: 66px;
								height: 100%;
								background: #72edf5;
								border-radius: 4px;
								text-align: center;
								line-height: 36px;
								font-family: PingFangSC-Regular;
								font-size: 14px;
								color: #000000;
							}
						}

						.table-list {
							width: 100%;
							list-style: none;
							padding: 0;
							margin-top: 15px;

							.list-item {
								padding: 0;
								margin: 0;
								list-style: none;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 36px;

								&:nth-of-type(2n + 1) {
									background: #06121d;
								}

								&:nth-of-type(2n) {
									background: transparent;
								}

								.item-no {
									width: 50px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									text-align: center;
								}

								.item-pic {
									width: 120px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									text-align: center;
								}

								.item-name {
									width: 158px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									cursor: pointer;
								}

								.item-time {
									width: 258px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-type {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-phone {
									width: 125px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-people {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-cardid {
									width: 194px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}
							}

							.list-item1 {
								padding: 0;
								margin: 0;
								list-style: none;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 100px;

								&:nth-of-type(2n + 1) {
									background: #06121d;
								}

								&:nth-of-type(2n) {
									background: transparent;
								}

								.item-no {
									width: 50px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;
								}

								.item-pic {
									width: 120px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;

									div {
										line-height: 100px;
									}
								}

								.item-name {
									width: 158px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-time {
									width: 258px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-type {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-phone {
									width: 125px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-people {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-cardid {
									width: 194px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 60px;
								}
							}
						}
					}

					.table-footer {
						width: 100%;
						// padding-top: 60px;
						box-sizing: border-box;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.btnsearch {
		float: right;
		width: 66px;
		height: 100%;
		background: #72edf5;
		border-radius: 4px;
		text-align: center;
		line-height: 36px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #000000;
    cursor:pointer;
	}

	body::-webkit-scrollbar {
		display: none;
	}

	.table-rs::-webkit-scrollbar {
		display: none;
	}

	.el-input__inner {
		background: #dcdfe6 !important;
	}
</style>
<style lang="less">
	.dateselect .el-input__inner {
		background: #06121d;

	}
  	.dateselect{
      border:1px solid grey !important;
    }
  .dateselect1{
		background: #06121d;
     /* border:1px solid #dcdfe6; */
	}
  .dateselect1>.el-input__prefix{
    display: block;
  }
  #dateselect1  {
		background: #06121d;
     border:1px solid grey;
     height: 40px !important;
	}

	.el-date-editor .el-range-input {
		background: #06121d;
	}
</style>
